//订单分佣流水
import React from 'react'
import { Modal, Form, Input, Button, Space, InputNumber, message, Descriptions, Row, Col } from "antd";
import TheTable from '@/components/TheTable'
import ThePagination from '@/components/ThePagination'
import TheButton from '@/components/TheButton'
import TheQueryForm from '@/components/TheQueryForm';
import { commissionRecordPage, commissionRecordExport, getAreaTree } from '@/request/distribution/orderCommission.js'
import Json2Excel from '@/utils/Json2Excel'
import TheImage from '@/components/TheImage';
import { getDateTime3 } from '@/utils/getDate'
import moment from 'moment';
import store from "@/store/store"
import _ from 'lodash'
// 获取当前年份和月份
const currentYear = moment().year();
const currentMonth = moment().month();
const currentDate = moment().date();
//处理年月为上一个月
let year = '', month = ''
if (currentMonth === 0) {
  year = currentYear - 1
  month = 12
} else {
  year = currentYear
  month = currentMonth - 1
}
export default class OrderCommission extends React.Component {
  state = {
    searchOption: [
      { field: 'memberLikeStr', label: '会员信息', placeholder: '输入会员ID/会员昵称/会员手机号', type: 'Input', defaultValue: '' },
      {
        field: 'time', label: '支付时间', type: 'RangePicker',
        otherConfig: {
          disabledDate: (current) => {
            // 获取要选择的年份和月份
            const selectedYear = current.year();
            const selectedMonth = current.month();
            const selectedDate = current.date();
            // 如果要选择的年份大于当前年份，禁用它
            if (selectedYear > currentYear) {
              return true;
            }
            // 如果要选择的年份等于当前年份，且要选择的月份大于当前月份，禁用它
            if (selectedYear === currentYear && selectedMonth > currentMonth) {
              return true;
            }
            // 如果要选择的年份等于当前年份，且要选择的月份大于当前月份，禁用它
            if (selectedYear === currentYear && selectedMonth === currentMonth && selectedDate > currentDate) {
              return true;
            }
            // 允许选择该日期
            return false;
          }
        },
      },
      { field: 'settlementStatus', label: '结算状态', placeholder: '全部', type: 'Select', options: [{ label: '待审核', value: '0' }, { label: '不结算', value: '1' }, { label: '已结算', value: '2' },{label:'拉黑不结算',value:'3'}] },
      { field: 'sharerId', label: '分享官', placeholder: '输入分享官ID', type: 'InputNumber', defaultValue: '' },
      { field: 'address', label: '地址', placeholder: '省市区', required: false, rules: [], type: 'Cascader', defaultValue: '', option: [], },
      { field: 'orderCode', label: '订单编号', placeholder: '输入订单编号', type: 'Input', defaultValue: '' },
      { field: 'orderState', label: '订单状态', placeholder: '全部', type: 'Select', options: [{ label: '待付款', value: '3' }, { label: '待发货', value: '4' }, { label: '待收货', value: '5' }, { label: '待分享', value: '6' }, { label: '交易成功', value: '9' }, { label: '交易关闭', value: '0' }] },
      { field: 'goodsName', label: '商品名称', placeholder: '输入商品名称', type: 'Input', defaultValue: '' },
      { field: 'clearTime', label: '佣金结算时间', type: 'RangePicker' },
    ],
    columns: [
      {
        title: "订单编号",
        dataIndex: "dataCode",
        key: "dataCode",
      },
      {
        title: "业务编号",
        dataIndex: "dataId",
        key: "dataId",
      },
      {
        title: "商品信息",
        render: (_, record) => {
          let info = []
          if (record.adminCommissionRecordShopOrderInfoVO) {
            if (record.adminCommissionRecordShopOrderInfoVO.adminCommissionShopOrderDetailVOS) {
              info = record.adminCommissionRecordShopOrderInfoVO.adminCommissionShopOrderDetailVOS
            }
          }
          return (<div style={{ width: 500, lineHeight: "40px", overflowX: "scroll" }}>
            <table >
              <tbody >
                {
                  info.length > 0 ? info.map((item, index) => {
                    let sku = JSON.parse(item.goodsSkuJson) //规格信息
                    let { skuAttribute } = sku
                    let skuValue = skuAttribute.map(v => {
                      return v.value
                    })
                    let salesStatus = '', flag = true
                    if (item.adminCommissionShopSalesReturnVO) {
                      switch (item.adminCommissionShopSalesReturnVO.salesStatus) {
                        case '1':
                          salesStatus = '退款中'
                          break
                        case '2':
                          salesStatus = '退款中，平台已同意，待寄回商品'
                          break
                        case '3':
                          salesStatus = '退款中，商品已寄回，待平台确认'
                          break
                        case '4':
                          salesStatus = '退款失败'
                          break
                        case '5':
                          salesStatus = '买家退货超时自动关闭'
                          break
                        case '6':
                          salesStatus = '卖家拒收'
                          break
                        case '9':
                          salesStatus = '退款成功'
                          break
                        case '0':
                          salesStatus = '退款关闭'
                          break
                        default:
                          salesStatus = ''
                      }
                      //表格加上类名
                      flag = !['1', '2', '3', '4', '5', '6', '9', '0'].includes(item.adminCommissionShopSalesReturnVO.salesStatus) ? true : false
                    }

                    return <tr style={{ marginRight: 20 }} key={index} className={flag ? '' : 'warning'}>
                      <td>
                        <Row style={{ margin: '20px 0px 0 10px', display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center' }}>
                          <Col><TheImage src={item.goodsImage} width={80} height={80} /></Col>
                        </Row>
                      </td>
                      <td  >
                        <Row style={{ marginLeft: 20, display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center' }}>
                          <Col>{item.goodsNameActivityNameSplicing ? item.goodsNameActivityNameSplicing : ''}</Col>
                          <Col>{skuValue.join(',')}</Col>
                        </Row>
                      </td>
                      <td  >
                        <Row style={{ marginLeft: 20, display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center' }}>
                          <Col>{`￥${React.$transNum(item.detailPayPrice || 0, 2, -2)} `}</Col>
                        </Row>
                      </td>
                      <td  >
                        <Row style={{ marginLeft: 20, display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center' }}>
                          <Col>{`x${item.orderProductCount} `}</Col>
                        </Row>
                      </td>
                      <td  >
                        <Row style={{ marginLeft: 20, display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center' }}>
                          <Col>{salesStatus}</Col>
                        </Row>
                      </td>
                      <td  >
                        <Row style={{ marginLeft: 20, display: 'flex', justifyContent: 'center', flexDirection: 'column', alignItems: 'center' }}>
                          <Col>{item.activityCommissionRate ? `佣金比${item.activityCommissionRate}%` : ''}</Col>
                        </Row>
                      </td>
                    </tr>
                  }) : null
                }
              </tbody>
            </table>
          </div>
          )
        }
      },
      {
        title: "用户昵称",
        dataIndex: "memberName",
        key: "memberName",
      },
      {
        title: "用户会员手机号",
        dataIndex: "memberPhone",
        key: "memberPhone",
        render: (text) => {
          var reg = /^(\d{3})\d{4}(\d{4})$/;
          if (text) {
            var memberMobile = text.toString().replace(reg, '$1****$2');
            return memberMobile;
          }
        }
      },
      {
        title: "支付时间",
        dataIndex: "businessTime",
        key: "businessTime",
      },
      {
        title: "订单状态",
        render: (_, record) => {
          let text = '', status = record.adminCommissionRecordShopOrderInfoVO
          if (status) {
            switch (status.orderState) {
              case '3':
                text = '待付款'
                break
              case '4':
                text = '待发货'
                break
              case '5':
                text = '待收货'
                break
              case '9':
                text = '交易成功'
                break
              case '6':
                text = '待分享'
                break
              case '0':
                text = '交易关闭'
                break
              default:
                text = '-'
            }
          }
          else {
            text = '-'
          }
          return text
        }
      },
      {
        title: "收货地址",
        render: (_, record) => {
          return <div style={{ width: 280 }}>{record.adminCommissionRecordShopOrderInfoVO ? record.adminCommissionRecordShopOrderInfoVO.memberAddress : '-'}</div>
        }
      },
      {
        title: "订单合计",
        render: (_, record) => {
          if (record.adminCommissionRecordShopOrderInfoVO) {
            if (record.adminCommissionRecordShopOrderInfoVO.orderTotalPrice) {
              return '￥' + React.$transNum(record.adminCommissionRecordShopOrderInfoVO.orderTotalPrice, 2, -2)
            } else {
              return '-'
            }
          } else {
            return '-'
          }
        }
      },
      {
        title: "优惠类型",
        render: (_, record) => {
          if (record.adminCommissionRecordShopOrderInfoVO) {
            return record.adminCommissionRecordShopOrderInfoVO.discountTypes ? record.adminCommissionRecordShopOrderInfoVO.discountTypes : '-'
          } else {
            return '-'
          }
        }
      },
      {
        title: "优惠金额",
        render: (_, record) => {
          if (record.adminCommissionRecordShopOrderInfoVO) {
            if (record.adminCommissionRecordShopOrderInfoVO.discountAmount) {
              return '￥' + React.$transNum(record.adminCommissionRecordShopOrderInfoVO.discountAmount, 2, -2)
            } else {
              return '-'
            }
          } else {
            return '-'
          }
        }
      },
      {
        title: "实付金额",
        render: (_, record) => {
          if (record.adminCommissionRecordShopOrderInfoVO) {
            if (record.adminCommissionRecordShopOrderInfoVO.orderPayPrice) {
              return '￥' + React.$transNum(record.adminCommissionRecordShopOrderInfoVO.orderPayPrice, 2, -2)
            } else {
              return '-'
            }
          } else {
            return '-'
          }
        }
      },
      {
        title: "退款金额",
        render: (_, record) => {
          if (record.adminCommissionRecordShopOrderInfoVO) {
            if (record.adminCommissionRecordShopOrderInfoVO.salesReturnPrice) {
              return '￥' + React.$transNum(record.adminCommissionRecordShopOrderInfoVO.salesReturnPrice, 2, -2)
            } else {
              return '-'
            }
          } else {
            return '-'
          }
        }
      },
      {
        title: "分享官ID",
        dataIndex: "sharerId",
        key: "sharerId",
      },
      {
        title: "佣金比例",
        dataIndex: "commissionRate",
        key: "commissionRate",
        render: (text) => {
          return text ? text + '%' : '-'
        }
      },
      {
        title: "预估金额",
        dataIndex: "estimatedAmount",
        key: "estimatedAmount",
        render: (text) => {
          return React.$transNum(text || 0, 2, -2)
        }
      },
      {
        title: "结算金额",
        dataIndex: "settlementAmount",
        key: "settlementAmount",
        render: (text) => {
          return text ? React.$transNum(text, 2, -2) : '-'
        }
      },
      {
        title: "佣金结算时间",
        dataIndex: 'settlementDate',
        key: "settlementDate",
        render: (text) => {
          return text ? text : "-"
        }
      },
      {
        title: "结算状态",
        dataIndex: "settlementStatus",
        key: "settlementStatus",
        render: (text) => {
          let settlementStatus = ''
          switch (text) {
            case '0':
              settlementStatus = '待审核'
              break
            case '1':
              settlementStatus = '不结算'
              break
            case '2':
              settlementStatus = '已结算'
              break
            case '3':
              settlementStatus = '拉黑不结算'
              break
            default:
              settlementStatus = '-'
              break
          }
          return settlementStatus
        }
      },
    ],
    dataSource: [],
    pageData: { pageNo: 1, pageSize: 10 },
    total: 0,
    exportBtnLoading: false,
  }
  componentDidMount() {
    let searchParams = store.getState().searchValue
    let { pageNo, pageSize, queryForm, pathName } = searchParams
    if (searchParams && pageNo && pathName == 'OrderCommission') {
      this.setState({
        queryForm, pageData: { pageNo, pageSize }
      }, () => {
        this.queryFormRef.onSetDefault({ ...queryForm })
        this.getData({ ...queryForm })
      })
    } else {
      this.getData()
    }
    this.getAreaTreeList()
  }
  //省市区
  getAreaTreeList = async () => {
    let { searchOption } = this.state
    let res = await getAreaTree()
    if (res.code === 0) {
      let arr = res.data.map(item => {
        return {
          label: item.label,
          value: item.label,
          children: item.children.map(city => {
            return {
              label: city.label,
              value: city.label,
              children: city.children.map(dis => {
                return {
                  label: dis.label,
                  value: dis.label
                }
              })
            }
          })
        }
      })
      searchOption[4].option = arr
    }
    this.setState({ searchOption })
  }
  //数据处理
  getData = (values) => {
    let { pageData, queryForm } = this.state
    this.setState({
      queryForm: values === undefined ? this.state.queryForm : { ...values }
    }, async () => {
      let params = { ...pageData, queryForm }
      store.dispatch({
        type: 'SaveSearchValues',
        data: { pathName: 'OrderCommission', ...params }
      })
      await commissionRecordPage({ ...pageData, ...this.state.queryForm, sharerType: '1' }).then(res => {
        if (res.code === 0) {
          this.setState({
            dataSource: res.data,
            pageData: {
              pageNo: res.pageNo,
              pageSize: res.pageSize
            },
            total: res.totalCount
          })
        }
      })
    })
  }
  //分页
  pageChange = (pageNo, pageSize) => {
    this.setState({ pageData: { pageNo, pageSize } }, () => {
      this.getData(this.state.queryForm)
    })
  }
  //搜索
  onFormSearch(values) {
    if (values && !_.isEmpty(values.time)) {
      values.startTime = getDateTime3(values.time[0]) + " 00:00:00"
      values.endTime = getDateTime3(values.time[1]) + " 23:59:59"
      delete values.time
    }
    if (values && !_.isEmpty(values.clearTime )) {
      values.settlementDateStart = values.clearTime[0].format('YYYY-MM-DD') + " 00:00:00"
      values.settlementDateEnd = values.clearTime[1].format('YYYY-MM-DD') + " 23:59:59"
      delete values.clearTime
    }
    if (values && !_.isEmpty(values.address)) {
      values.address = values.address.join('')
    }
    this.setState({
      pageData: { pageNo: 1, pageSize: 10 }, year, month
    }, () => {
      this.getData(values)
    })
  }
  //搜索重置
  onReset() {
    this.setState({ queryForm: {} }, () => {
      this.pageChange(1, 10)
    })
  }
  // 导出
  export = () => {
    this.setState({ exportBtnLoading: true }, async () => {
      let tB_data = []
      let res = await commissionRecordExport({ ...this.state.queryForm, sharerType: '1' })
      if (res.code === 0) {
        let salesStatus = '-'
        tB_data = res.data.map(item => {
          salesStatus = '-'
          let settlementStatus = '-', orderState = '-', orderTotalPrice = '-', discountTypes = '-', discountAmount = '-', settlementAmount = '-', estimatedAmount = '-'
          let orderPayPrice = '-', salesReturnPrice = '-', memberAddress = '-',settlementDate = "-"
          let sku = JSON.parse(item.goodsSkuJson) //规格信息
          let { skuAttribute } = sku
          let skuValue = skuAttribute.map(v => {
            return v.value
          })
          //流水信息
          if (item.adminCommissionRecordListVO) {
            //预估金额
            estimatedAmount = item.adminCommissionRecordListVO.estimatedAmount ? '￥' + React.$transNum(item.adminCommissionRecordListVO.estimatedAmount, 2, -2) : '-'
            //结算金额
            settlementAmount = item.adminCommissionRecordListVO.settlementAmount ? '￥' + React.$transNum(item.adminCommissionRecordListVO.settlementAmount, 2, -2) : '-'
             //佣金结算时间
             settlementDate = item.adminCommissionRecordListVO.settlementDate ? item.adminCommissionRecordListVO.settlementDate : "-"
            if (item.adminCommissionRecordListVO.settlementStatus) {
              //结算状态
              switch (item.adminCommissionRecordListVO.settlementStatus) {
                case '0':
                  settlementStatus = '待审核'
                  break
                case '1':
                  settlementStatus = '不结算'
                  break
                case '2':
                  settlementStatus = '已结算'
                  break
                case '3':
                  settlementStatus = '拉黑不结算'
                default:
                  settlementStatus = '-'
                  break
              }
            }
          }
          //退款信息
          if (item.adminCommissionShopSalesReturnVO) {
            //退款状态
            switch (item.adminCommissionShopSalesReturnVO.salesStatus) {
              case '1':
                salesStatus = '退款中'
                break
              case '2':
                salesStatus = '退款中，平台已同意，待寄回商品'
                break
              case '3':
                salesStatus = '退款中，商品已寄回，待平台确认'
                break
              case '4':
                salesStatus = '退款失败'
                break
              case '5':
                salesStatus = '买家退货超时自动关闭'
                break
              case '6':
                salesStatus = '卖家拒收'
                break
              case '9':
                salesStatus = '退款成功'
                break
              case '0':
                salesStatus = '退款关闭'
                break
              default:
                salesStatus = ''
            }

          }
          //订单信息
          if (item.adminCommissionRecordShopOrderInfoListVO) {
            //订单状态
            if (item.adminCommissionRecordShopOrderInfoListVO.orderState) {
              switch (item.adminCommissionRecordShopOrderInfoListVO.orderState) {
                case '3':
                  orderState = '待付款'
                  break
                case '4':
                  orderState = '待发货'
                  break
                case '5':
                  orderState = '待收货'
                  break
                case '9':
                  orderState = '交易成功'
                  break
                case '6':
                  orderState = '待分享'
                  break
                case '0':
                  orderState = '交易关闭'
                  break
                default:
                  orderState = '-'
              }
            }
            //收货地址
            memberAddress = item.adminCommissionRecordShopOrderInfoListVO.memberAddress ? item.adminCommissionRecordShopOrderInfoListVO.memberAddress : '-'
            // 订单合计
            orderTotalPrice = item.adminCommissionRecordShopOrderInfoListVO.orderTotalPrice ? '￥' + React.$transNum(item.adminCommissionRecordShopOrderInfoListVO.orderTotalPrice, 2, -2) : '-'
            //优惠类型
            discountTypes = item.adminCommissionRecordShopOrderInfoListVO.discountTypes ? item.adminCommissionRecordShopOrderInfoListVO.discountTypes : '-'
            //优惠金额
            discountAmount = item.adminCommissionRecordShopOrderInfoListVO.discountAmount ? '￥' + React.$transNum(item.adminCommissionRecordShopOrderInfoListVO.discountAmount, 2, -2) : '-'
            //实付金额
            orderPayPrice = item.adminCommissionRecordShopOrderInfoListVO.orderPayPrice ? '￥' + React.$transNum(item.adminCommissionRecordShopOrderInfoListVO.orderPayPrice, 2, -2) : '-'
            //退款金额
            salesReturnPrice = item.adminCommissionRecordShopOrderInfoListVO.salesReturnPrice ? '￥' + React.$transNum(item.adminCommissionRecordShopOrderInfoListVO.salesReturnPrice, 2, -2) : '-'
            //退款金额
            salesReturnPrice = item.adminCommissionRecordShopOrderInfoListVO.salesReturnPrice ? '￥' + React.$transNum(item.adminCommissionRecordShopOrderInfoListVO.salesReturnPrice, 2, -2) : '-'
          }
          return {
            shopOrderId: item.adminCommissionRecordShopOrderInfoListVO ? item.adminCommissionRecordShopOrderInfoListVO.shopOrderId || '-' : '-',//业务编号
            orderCode: item.adminCommissionRecordShopOrderInfoListVO ? item.adminCommissionRecordShopOrderInfoListVO.orderCode || '-' : '-',//订单编号
            goodsNameActivityNameSplicing: item.goodsNameActivityNameSplicing ? item.goodsNameActivityNameSplicing : '-',//商品名称
            goodsSkuJson: skuValue,//商品规格
            orderProductCount: item.orderProductCount ? item.orderProductCount : '-',//数量
            orderPrice: item.orderPrice ? '￥' + React.$transNum(item.orderPrice, 2, -2) : '￥0.00',//商品单价
            detailDiscountsPrice: item.detailDiscountsPrice ? '￥' + React.$transNum(item.detailDiscountsPrice, 2, -2) : '￥0.00',//优惠价格
            detailPayPrice: item.detailPayPrice ? '￥' + React.$transNum(item.detailPayPrice, 2, -2) : '￥0.00',//实付金额
            salesStatus,//退款状态
            activityCommissionRate: item.activityCommissionRate ? item.activityCommissionRate + '%' : '-',//佣金比例
            memberName: item.adminCommissionRecordListVO ? item.adminCommissionRecordListVO.memberName || '-' : '-',//用户昵称
            memberPhone: item.adminCommissionRecordListVO ? item.adminCommissionRecordListVO.memberPhone || '-' : '-',//用户手机号
            businessTime: item.adminCommissionRecordListVO ? item.adminCommissionRecordListVO.businessTime || '-' : '-',//支付时间
            orderState,//订单状态
            memberAddress,//收货地址
            orderTotalPrice,//订单合计
            discountTypes,//优惠类型
            discountAmount,//优惠金额
            orderPayPrice,//实付金额
            salesReturnPrice,//退款金额
            estimatedAmount, //预估金额
            settlementAmount, //结算金额
            settlementDate, //佣金结算时间
            sharerId: item.adminCommissionRecordListVO ? item.adminCommissionRecordListVO.sharerId || '-' : '-',//分享官id
            settlementStatus, //结算状态
          }
        })
        const option = {
          header: [
            { prop: 'shopOrderId', title: '业务编号', width: 25, merge: true },
            { prop: 'orderCode', title: '订单号(合并)', width: 25, merge: true },
            { prop: 'orderCode', title: '订单编号', width: 25, },
            { prop: 'goodsNameActivityNameSplicing', title: '商品名称', width: 40 },
            { prop: 'goodsSkuJson', title: '商品规格', width: 20 },
            { prop: 'orderProductCount', title: '商品数量', width: 15 },
            { prop: 'orderPrice', title: '商品单价', width: 15 },
            { prop: 'detailDiscountsPrice', title: '优惠价格', width: 15 },
            { prop: 'detailPayPrice', title: '实付金额', width: 15 },
            {
              prop: 'salesStatus', title: '退款状态', width: 20, colorFun: (str) => {
                if (!['-', null, undefined, ''].includes(str)) return 'ff0000'
                return '000000'
              }
            },
            { prop: 'activityCommissionRate', title: '佣金比', width: 15 },
            { prop: 'memberName', title: '用户昵称', width: 15, merge: true },
            { prop: 'memberPhone', title: '用户会员手机号', width: 25, merge: true },
            { prop: 'businessTime', title: '支付时间', width: 25, merge: true },
            { prop: 'orderState', title: '订单状态', width: 15, merge: true },
            { prop: 'memberAddress', title: '收货地址', width: 40, merge: true },
            { prop: 'orderTotalPrice', title: '订单合计', width: 15, merge: true },
            { prop: 'discountTypes', title: '优惠类型', width: 20, merge: true },
            { prop: 'discountAmount', title: '优惠金额', width: 15, merge: true },
            { prop: 'orderPayPrice', title: '实付金额', width: 15, merge: true },
            { prop: 'salesReturnPrice', title: '退款金额', width: 15, merge: true },
            { prop: 'sharerId', title: '分享官ID', width: 15, merge: true },
            { prop: 'estimatedAmount', title: '预估金额', width: 15, merge: true },
            { prop: 'settlementAmount', title: '结算金额', width: 15, merge: true },
            { prop: 'settlementDate', title: '佣金结算时间', width: 15, merge: true },
            { prop: 'settlementStatus', title: '退款/结算状态', width: 15, merge: true },
          ],
          dataSource: tB_data,
          fileName: '订单分佣流水',
          fillCell: true,
          datumKey: 'shopOrderId'
        }
        Json2Excel(option)
      }
    })

    this.setState({ exportBtnLoading: false })
  }
  render() {
    const { searchOption, columns, dataSource, pageData: { pageNo, pageSize }, total, exportBtnLoading } = this.state
    return (
      <div className='p-layout-box commodity-content'>
        <TheQueryForm
          ref={(ref) => this.queryFormRef = ref}
          option={searchOption}
          show={true}
          onReset={() => this.onReset()}
          onGetValues={(values) => this.onFormSearch(values)} >
        </TheQueryForm>
        <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 20 }}>
          <TheButton haspermi={['distribution:orderCommission:export']} size='middle' type='default' onClick={() => { this.export() }} loading={exportBtnLoading}>导出</TheButton>
        </div>
        <TheTable
          scroll={{ x: "max-content", y: '63vh' }}
          columns={columns}
          dataSource={dataSource}
          rowKey={'userId'}
        />
        <ThePagination pageNo={pageNo} pageSize={pageSize} total={total} pageChange={this.pageChange} />
      </div>
    )
  }
}
